<template>
  <div class="con_store_main">
    <!-- 确认销售订单弹窗 -->
    <el-dialog title="填写销售信息" :visible.sync="saleBox" width="45%" :close-on-click-modal="true" center>
      <div class="dialog-content-container">
        <div v-for="item in selectedRows" :key="item.clothesId">
          <div>
            <span class="supply-span"> 品牌:{{ item.brand }} </span>
            <span class="supply-span"> 类别:{{ item.categoryName }} </span>
            <span class="supply-span"> 编码:{{ item.code }} </span>
          </div>
          <div class="supply-input">
            <span style="
                color: rgb(97, 101, 106);
                font-size: 16px;
                margin-top: 14px;
                margin-right: 4px;
              ">价格</span>
            <el-input style="
                height: 45px;
                width: 200px;
                margin-right: 12px;
                margin-top: 4px;
              " v-model="item.salePrice" placeholder="请输入价格"></el-input>
            <span style="
                color: rgb(97, 101, 106);
                font-size: 16px;
                margin-top: 14px;
                margin-right: 4px;
              ">数量</span>
            <el-input-number style="margin-top: 4px" v-model="item.quantity" label="描述文字"></el-input-number>
          </div>
        </div>
        <el-button plain @click="confirmSale">确定销售<i class="el-icon-shopping-cart-full el-icon--right"></i>
        </el-button>
      </div>
    </el-dialog>
    <div v-show="clothesTable">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="服装品牌">
          <el-input v-model="formInline.brand" placeholder="输入品牌进行查询……"></el-input>
        </el-form-item>
        <el-form-item label="服装编码">
          <el-input v-model="formInline.code" placeholder="输入服装编码……"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
          <el-button @click="sale" type="primary" icon="el-icon-goods">销售</el-button>
          <el-button @click="openSale" type="primary" icon="el-icon-tickets">销售记录</el-button>
        </el-form-item>
      </el-form>
      <span class="noteSpan">勾选需销售的服装后点击销售按钮</span>
      <el-table class="table" :data="tableData" style="width: 100%" v-loading="loading"
        :default-sort="{ prop: 'index', order: 'descending' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" sortable width="100">
        </el-table-column>
        <el-table-column prop="brand" label="服装品牌" width="100">
        </el-table-column>
        <el-table-column prop="categoryName" label="类别名称">
        </el-table-column>
        <el-table-column prop="note" label="note" width="80"> </el-table-column>
        <el-table-column prop="size" label="尺寸" width="70"> </el-table-column>
        <el-table-column prop="inventory" label="库存"> </el-table-column>
        <el-table-column prop="clothesIntroduction" label="服装简介">
        </el-table-column>
        <el-table-column prop="material" label="服装材质"> </el-table-column>
        <el-table-column prop="code" label="编码"> </el-table-column>
      </el-table>
    </div>
    <div v-show="saleTable">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button @click="findSaleData" type="primary" icon="el-icon-search">
            刷新
          </el-button>
          <el-button @click="openClothes" type="primary">
            <i class="el-icon-arrow-left"></i> 返回
          </el-button>
        </el-form-item>
      </el-form>
      <el-table class="table" :data="saleTableData" style="width: 100%" v-loading="loading"
        :default-sort="{ prop: 'index', order: 'descending' }" @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form v-for=" item in props.row.list" :key="item.clothesId" class="item" label-position="left" inline>
              <el-form-item label="服装品牌:">
                <span>{{ item.brand }}</span>
              </el-form-item>
              <el-form-item label="类别名称:">
                <span>{{ item.categoryName }}</span>
              </el-form-item>
              <el-form-item label="尺寸:">
                <span>{{ item.size }}</span>
              </el-form-item>
              <el-form-item label="单价:">
                <span>{{ item.salePrice }}</span>
              </el-form-item>
              <el-form-item label="数量:">
                <span>{{ item.quantity }}</span>
              </el-form-item>
              <el-form-item label="总价:">
                <span>{{ item.saleTotal }}</span>
              </el-form-item>
              <el-form-item label="编码:">
                <span>{{ item.code }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" sortable width="100">
        </el-table-column>
        <el-table-column prop="totalAmount" label="订单总价" width="200">
        </el-table-column>
        <el-table-column prop="createTime" label="订单时间" width="800">
        </el-table-column>

      </el-table>
    </div>
    <el-pagination v-show="clothesTable" style="margin: auto; margin-top: 8px" :hide-on-single-page="value"
      :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next" :total="this.total"
      @current-change="handleSizeChange">
    </el-pagination>
    <el-pagination v-show="saleTable" style="margin: auto; margin-top: 8px" :hide-on-single-page="value"
      :current-page.sync="saleCurrentPage" :page-size="5" :pager-count="11" layout="prev, pager, next"
      :total="this.saleTotal" @current-change="handleSizeChange">
    </el-pagination>
  </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
  mounted() {
    this.findData();
  },
  data() {
    return {
      formInline: {
        brand: "",
        code: "",
      },
      currentPage: 1, // 当前页码
      saleCurrentPage: 1,
      pageSize: 6, // 每页显示的记录数
      total: 0, // 总个数  //默认设置 0
      saleTotal: 0, // 总个数  //默认设置 0
      tableData: [],
      saleTableData: [],
      selectedRows: [],
      value: false,
      loading: false,
      clothesTable: true,
      saleTable: false,
      saleBox: false,
    };
  },
  methods: {
    time() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 600);
    },
    handleSizeChange() {
      this.findData();
      this.findSaleData();
    },
    openSale() {
      this.saleTable = true;
      this.clothesTable = false;
      this.findSaleData();
    },
    openClothes() {
      this.saleTable = false;
      this.clothesTable = true;
      this.findData();
    },
    sale() {
      this.saleBox = true;
    },
    async findSaleData() {
      this.time();
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const params = {
        currentPage: this.saleCurrentPage /* 当前页码 */,
        pageSize: 5 /* 页码大小 */,
        storeId: localStorage.getItem("storeId"),
      };
      const config = {
        url: "api/user/sale",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.saleTotal = res.data.data.total; /* 得到数据的总数 */
        this.saleTableData = res.data.data.pageList; /* 得到数据 */
      }

    },
    async findData() {
      this.time();
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const params = {
        currentPage: this.currentPage /* 当前页码 */,
        pageSize: this.pageSize /* 页码大小 */,
        storeId: localStorage.getItem("storeId"),
        brand: this.formInline.brand /* 品牌 */,
        code: this.formInline.code /* 编码 */,
      };
      const config = {
        url: "api/user/clothes",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.total = res.data.data.total; /* 得到数据的总数 */
        this.tableData = res.data.data.pageList; /* 得到数据 */
      }
    },
    handleSelectionChange(selectedItems) {
      this.selectedRows = selectedItems;
      this.selectedRows.forEach((item) => {
        this.$set(item, "salePrice", null);
        this.$set(item, "quantity", null);
      });
    },
    async confirmSale() {
      console.log(this.selectedRows);
      for (let val of this.selectedRows) {
        console.log(val);
        if (val.salePrice < 0 || val.quantity < 0 || val.salePrice === 0 || val.quantity === 0 || val.quantity === null || val.salePrice === null) {
          this.$message.error("请检查数量和价格");
          return;
        }
      }
      const config = {
        url: "api/user/sale",
        method: "post",
        data: {
          selectedRows: this.selectedRows,
          storeId: localStorage.getItem("storeId"),
        },
      };
      const res = await request(config);
      if (res.data.code == 1) {
        this.findData();
        this.findSaleData();
        this.$message.success("添加成功");
        this.saleBox = false;
      } else {
        this.$message.error(res.data.msg);
      }
    },
  },
};
</script>
<style>
.item .el-form-item__label {
  color: #99a9bf;
}

.con_store_main {
  height: 498px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.noteSpan {
  color: rgb(210, 210, 210);
  margin-left: 6px;
  font-size: 13px;
  font-weight: bold;
}

.supply-input {
  display: flex;
  margin: 4px;
}

.supply-span {
  font-size: 18px;
  margin: 4px;
  padding-bottom: 12px;
}
</style>